import React, { memo, useEffect, useState } from 'react';
import { Box, Form, Card, Field, Input, Radio } from '@alifd/next';

import st from './detail.module.scss';
import { FormattedDate, FormattedMessage, FormattedNumber } from 'react-intl';
import { useHistory, useRequest } from 'ice';
import { saveAppraisal } from '../service';
import { AppraiseResultEnums } from '@/pages/OperationCenter/LogisticsDetail/entity';

interface Props extends LogisticsState.DeteilVO {
  isPreview?: boolean;
}

const AppraisalDetail: React.FunctionComponent<Props> = ({ isPreview = true, ...props }): JSX.Element => {
  const field = Field.useField([]);
  const history = useHistory();

  const { request, loading } = useRequest(saveAppraisal, {
    manual: true,
    onSuccess: () => {
      history.goBack();
    },
  });

  const handleOk = (values, errors) => {
    if (errors) {
      return;
    }
    request({
      ...values,
      shippingId: props.shippingId,
    });
  };

  return (
    <Card free>
      <Card.Header title="鉴定信息" />
      <Card.Divider />
      <Card.Content>
        <Form
          labelAlign="left"
          className={st.Content}
          style={{ width: '80%' }}
          field={field}
          useLabelForErrorMessage
          isPreview={isPreview}
          responsive
        >
          <Form.Item label="防伪标识：" name="securityCode" required colSpan={6}>
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="库位编码：" name="stockNo" required colSpan={6}>
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="鉴定人：" name="appraisalName" required colSpan={6}>
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="鉴定结果：" name="result" required colSpan={6}>
            <Radio.Group dataSource={AppraiseResultEnums} />
          </Form.Item>
          {isPreview ? (
            <Form.Item label="鉴定时间：" name="securityTime" colSpan={6}>
              <Input placeholder="请输入" />
            </Form.Item>
          ) : null}
          <Form.Item
            label="备注:"
            name="remark"
            colSpan={isPreview ? 6 : 12}
          >
            <Input.TextArea placeholder="请输入" showLimitHint maxLength={100} />
          </Form.Item>
          <Form.Item hidden={isPreview} label=" " colSpan={12} style={{ textAlign: 'center', display: isPreview ? 'none' : 'flex' }}>
            <Form.Submit type="primary" onClick={handleOk} validate loading={loading}>
              <FormattedMessage id="btn.save" />
            </Form.Submit>
          </Form.Item>
        </Form>
      </Card.Content>
    </Card>
  );
};

export default memo(AppraisalDetail);
